@keyframes minnMarginAnimation {
  0% {
    margin-right: 160px;
  }
  50% {
    margin-right: 160px;
  }
  100% {
    margin-right: 0;
  }
}
.articleMainWrap {
  position: relative;
  display: flex;
  // flex-direction: column;
  width: 800px;
  height: calc(100% - 30px);
  transition: margin-right 0.1s; /* 设置 maxMargin 的过渡时间为 0.1 秒 */
  &.maxMargin {
    margin-right: 160px;
  }
  &.minnMargin {
    animation: minnMarginAnimation 1s ease-in-out; /* 使用关键帧动画 */
  }
  // overflow: hidden;
  .articleMain {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 0;
    padding: 0px 0px 0px 0px;
    overflow-y: scroll;
    font-size: 16px;
    // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    transform-style: preserve-3d;
    transition: 1s;
    .box {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      margin-top: 15px;
    }
    .title {
      font-weight: 600;
      font-size: 17px;
    }
    .inputBox {
      width: 100%;
      margin: 0;
      padding: 0;
      color: #3e4352;
      font-weight: 500;
      font-size: 12px;
      line-height: 30px;
    }
    .count {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      min-width: 45px;
      color: #bbb;
      font-size: 9px;
    }
    .loading {
      display: flex;
      gap: 6;
      align-items: center;
      justify-content: flex-start;
      width: 280px;
      padding-left: 18px;
      background: #fff;
    }

    &:hover {
      overflow-y: scroll;
      &::-webkit-scrollbar-thumb {
        background-color: #d9d9d9;
      }
    }

    &::-webkit-scrollbar {
      display: flex;
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d9d9d900;
      border-radius: 2px;
    }
    .score-box {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      margin: 0;
      padding: 22px 65px 30px 0px;
      color: #5e6780;
      font-weight: 500;
      font-family: PingFangSC-Medium, PingFang SC;
      // background-color: #9095a4;
      .score-hd {
        font-size: 12px;
        vertical-align: middle;
      }
      .score-bd {
        margin: 0 13px 0 10px;
        margin-top: -2px;
        color: #5e6780;
        font-weight: 500;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        line-height: 20px;
        vertical-align: middle;
      }
      .score-ft {
        color: #5e6780;
        font-weight: 500;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        line-height: 17px;
        vertical-align: middle;
      }
      .docBtnWrap {
        position: relative;
        flex: 1;
        text-align: right;
        .ant-btn {
          width: 39px;
          height: 39px;
          margin: 0 6px;
          color: #3e4352;
          font-weight: normal;
          font-size: 16px;
          font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
          background: #f3f3f5;
          border: 1px solid #f7f7fa;
        }
        .avatarBox {
          display: inline-block;
          width: 39px;
          height: 39px;
          margin: 0 6px;
          background: #f3f3f5;
          border: 1px solid #f7f7fa;
          border-radius: 100px;
          cursor: pointer;
          &.redDot {
            position: relative;
            &::after {
              position: absolute; /* 绝对定位 */
              top: 0; /* 距离顶部的距离，负值用于将其上移 */
              right: 0; /* 距离右侧的距离，负值用于将其右移 */
              width: 8px; /* 红点的宽度 */
              height: 8px; /* 红点的高度 */
              background: #ff4040; /* 红点的颜色 */
              border-radius: 50%; /* 使其成为圆形 */
              content: ''; /* 伪元素内容为空 */
            }
          }
        }

        // .ant-btn:hover {
        //   border-color: #40a9ff;
        // }
      }
    }
    .articleTitle {
      width: calc(100% - 85px);
      margin: 15px 70px 20px 20px;
      padding: 0 70px 0 30px;
      color: #3e4352;
      font-weight: 600;
      // height: 26px;
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      line-height: 26px;
    }
    .articleContentWrap {
      position: relative;
      width: 100%;
      height: calc(100% - 100px);
      padding: 0 70px 20px 0;
      overflow-y: auto;
      color: #3e4352;
      font-weight: 400;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 26px;

      .articleContent {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        padding: 0 0px 0 0px;
      }
      .htmlBox {
        position: relative;
        width: 100%;
        p {
          min-height: 1.7em;
          margin-bottom: 0;
        }
      }
    }
  }
  .operateModal {
    position: absolute;
    z-index: 1;
    width: 72px;
    padding: 3px 0;
    line-height: 0;
    // height: 100px;
    background: #ffffff;
    border: 1px solid rgba(221, 223, 230, 0.69);
    border-radius: 4px;
    box-shadow: 0px 2px 20px 0px rgba(19, 21, 30, 0.1);
    .operateList {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: space-between;
      height: 22px;
      margin: 2px 5px;
      padding: 0 5px;
      color: #5e6780;
      font-weight: 500;
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      line-height: 22px;
      border-radius: 4px;
      cursor: pointer;
      &.topBor {
        margin-top: 6px;
        margin-bottom: 6px;
        border-top: 1px solid #eeeeee;
      }
      &:hover {
        background-color: #f1f1f7;
        .anticon {
          color: #1677ff;
        }
      }
      &.zanColor:hover {
        .anticon {
          color: green;
        }
      }
      &.caiColor:hover {
        .anticon {
          color: red;
        }
      }
      .operateList-hd {
        margin-right: 10px;
        margin-left: 2px;
        color: #5e6780;
        font-weight: 500;
        font-family: PingFangSC-Medium, PingFang SC;
      }
      .operateList-bd {
        flex: 1;
      }
    }
    .operateDividerLine {
      display: inline-block;
      width: 94%;
      height: 1px;
      margin: 2px 3%;
      padding: 0;
      background: rgba(221, 223, 230, 0.69);
    }
  }
  .scoreDialog {
    position: absolute;
    top: 22px;
    right: 75px;
    z-index: 1;
    box-sizing: border-box;
    width: 0;
    height: 0;
    padding: 10px 0;
    background: #f1f5f9;
    border: 1px solid rgba(0, 117, 255, 0.19);
    border-radius: 10px;
    box-shadow: 3px 2px 34px 0px rgba(61, 68, 133, 0.15);
    .scoreList {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      width: 100%;
      height: 47px;
      padding: 0 20px;
      .scoreList-hd {
        flex: 1;
        height: 20px;
        color: #3e4352;
        font-weight: 500;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        line-height: 20px;
      }
      .scoreList-bd {
        width: 58px;
        height: 35px;
        color: #3e4352;
        font-weight: normal;
        font-size: 18px;
        font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
        line-height: 35px;
        text-align: center;
        background: #cae4ff;
        border-radius: 6px;
        &.inputScore {
          display: inline-flex;
          align-content: center;
          align-items: center;
          justify-content: flex-start;
          width: 100px;
          background: #eeeeee;
          border: 1px solid rgba(255, 33, 33, 0.5);
          border-radius: 6px;
          .inputScore-hd {
            display: inline-flex;
            flex: 1;
            align-content: center;
            align-items: center;
            justify-content: flex-start;
            vertical-align: middle;
            .ant-input {
              vertical-align: middle;
              background-color: #eeeeee;
              border: none;
            }
            .ant-input-number {
              background-color: #eeeeee;
              border: none;
              .ant-input-number-input:placeholder-shown {
                padding-left: 5px;
              }
            }
          }
          .inputScore-bd {
            width: 30px;
            vertical-align: middle;
            .ant-btn {
              background-color: transparent;
              border: none;
            }
          }
        }
      }
      // .orange {
      //   background: #fde0bd;
      // }
      .bgcolor1 {
        background: #c8f9b9;
      }
      .bgcolor2 {
        background: #ffe7b6;
      }
      .bgcolor3 {
        background: #ffcfcf;
      }
    }
    // .scoreList{
    //   display: none;
    // }
    /* 定义关键帧动画 */
    @keyframes shrinkAnimation {
      0% {
        right: -147px;
        width: 210px;
        height: 115px;
      }
      50% {
        right: -147px;
        width: 210px;
        height: 39px;
        border-radius: 100px 100px 100px 100px;
      }
      100% {
        top: 22px;
        right: 75px;
        display: none;
        width: 39px;
        height: 39px;
        border-radius: 100px 100px 100px 100px;
        box-shadow: 0px 0px 0px 0px rgba(61, 68, 133, 0);
      }
    }
    /* 定义关键帧动画 */
    @keyframes shrinkAnimation2 {
      0% {
        right: 75px; /* 开始位置，与shrinkAnimation的结束位置相反 */
        width: 39px; /* 开始宽度，与shrinkAnimation的结束宽度相反 */
        height: 39px; /* 开始高度，与shrinkAnimation的结束高度相同 */
        border-radius: 100px; /* 开始时的圆角，与shrinkAnimation的结束圆角相同 */
      }
      50% {
        right: -147px; /* 中间位置，与shrinkAnimation的中间位置相反 */
        width: 210px; /* 中间宽度，与shrinkAnimation的中间宽度相反 */
        height: 39px; /* 中间高度，与shrinkAnimation的中间高度相反 */
        border-radius: 10px; /* 中间圆角，与shrinkAnimation的中间圆角相反 */
      }
      100% {
        right: -147px; /* 结束位置，与shrinkAnimation的开始位置相反 */
        width: 210px; /* 结束宽度，与shrinkAnimation的开始宽度相反 */
        height: 115px; /* 结束高度，与shrinkAnimation的开始高度相同 */
        border-radius: 10px; /* 结束圆角，与shrinkAnimation的开始圆角相同 */
      }
    }

    /* 应用关键帧动画 */
    &.scoreDialogHide {
      z-index: 0;
      animation: shrinkAnimation 0.5s ease-in-out forwards;
      .scoreList {
        display: none; /* 在动画结束时显示scoreList */
      }
    }

    &.scoreDialogShow {
      overflow: hidden;
      animation: shrinkAnimation2 0.5s ease-in-out forwards;
      .scoreList {
        display: flex; /* 在动画结束时显示scoreList */
      }
    }
  }
}

.domVisible {
  z-index: 100;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  .articleContentWrap {
    overflow: hidden !important;
    overflow: auto !important;
  }
}

.domHidden {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: none;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  .articleContentWrap {
    overflow: hidden !important;
  }
}
